<template>
  <div class="hader">
    <div>
      <h2 class="tite">波比波比波商品管理系统</h2>
      <el-icon @click="handleClickFn"><Menu /></el-icon>
    </div>
    <div>
      <el-dropdown size="small" type="primary" trigger="click" @command="onCommand">
        <span class="icon-btn"
          ><span class="username">{{username}}</span><el-icon><CaretBottom /></el-icon
        ></span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="handleGoHome">首页</el-dropdown-item>
            <el-dropdown-item command="handleOutLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">

import { Menu, CaretBottom } from "@element-plus/icons-vue";
import { useCounterStore } from "@/stores/counter";
import { useMenusStroe } from '@/stores/menus'
import { useUserInfoStore } from '@/stores/userInfo'
import { useRouter } from "vue-router";
import Cookies from "js-cookie";
//用户信息仓库
const userInfoStore = useUserInfoStore()
const username = userInfoStore.username
//菜单仓库
let menusStore = useMenusStroe()
let count = useCounterStore();
const router = useRouter();


const handleClickFn = () => {
  count.increment();
};
const onCommand = (command: string | number | object) => {
  if (command === "handleGoHome") {
    router.push({
      path: "/index",
    });
  } else if (command === "handleOutLogin") {
    // 清空menus
    menusStore.updatedMenus([])
    // 清空用户信息
    userInfoStore.updataUserInfo("",[]) // 根据我们前置守卫的逻辑 , 需要清空菜单栏数据，才会重新获取个人用户信息
    Cookies.remove("token");//不删除 token 无法跳到登录界面
    location.reload();
  }
};
</script>

<style lang="scss" scoped>
.hader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tite {
    float: left;
    padding: 0 15px;
    line-height: 70px;
    font-size: 22px;
    color: #fff;
  }
  .el-icon {
    height: 70px;
    line-height: 70px;
    font-size: 20px;
    color: #fff;
  }
  .icon-btn {
    display: flex;
    align-items: center;
    .username {
      display: inline-block;
      color: #fff;
      margin-right: 5px;
    }
  }
}
</style>
